<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10400602") }}
    </PageTitle>
    <!-- body -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
      @current-change="currentChangeHandle"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.appName"
            :placeholder="$t('appstore.application.appName')"
            clearable
            @blur="() => (dataForm.appName = dataForm.appName.trim())"
            @keyup.enter.native="getAppDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="dataForm.developerName"
            :placeholder="$t('appstore.application.developerName')"
            clearable
            @blur="() => (dataForm.developerName = dataForm.developerName.trim())"
            @keyup.enter.native="getAppDataList((pageNo = 1))"
          />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('developer_app.status')"
          >
            <el-option
              v-for="item in statusArray"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.appCategoryId"
            clearable
            :placeholder="$t('developer_app.category')"
          >
            <el-option
              v-for="item in categoryList"
              :key="item.categoryId"
              :value="item.categoryId"
              :label="item.categoryName"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-8" @click="getAppDataList((pageNo = 1))">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="dataListLoading" :data="appList" stripe>
        <el-table-column
          prop="appIconUrl"
          width="400px"
          min-width="300px"
          :label="$t('developer_app.app')"
        >
          <template v-slot="{ row }">
            <div
              style="display: flex"
              class="cursor-pointer"
              @click="showDetailHandle(row.appId, row.appVersionId)"
            >
              <!-- <div class="app-logo2" style="margin-right: 10px">
                <img
                  :src="iconView(row.appIconUrl)"
                  class="app-logo"
                  width="72px"
                  @error="
                    () => (row.appIconUrl = require('@/assets/img/Android.png'))
                  "
                />
              </div> -->
              <div class="app-logo2" style="margin-right: 10px">
                <img :src="iconView(row.appIconUrl)" class="app-logo" width="32px" />
              </div>
              <div>
                <div style="color: #12263f">
                  {{ row.appName }}
                </div>
                <div style="color: #95aac9 !important">
                  {{ row.appVersion }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          prop="developerName"
          min-width="140px"
          :label="$t('developer.name')"
        />
        <el-table-column
          prop="categoryName"
          min-width="100"
          :label="$t('developer_app.category')"
        />
        <el-table-column prop="creTime" :label="$t('developer_app.app_submit_time')">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.creTime)">
              {{ dateFilter(scope.row.creTime) }}
              {{ scope.row.creTime ? "" : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" min-width="100" :label="$t('developer.status')">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 11" size="small" type="warning">
              {{ $t("developer_app.status_option[0].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 9" size="small"
              >{{ $t("developer_app.status_option[1].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 7" size="small" type="info">
              {{ $t("developer_app.status_option[2].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 6" size="small" type="warning">
              {{ $t("developer_app.status_option[3].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 5" size="small" type="info">
              {{ $t("developer_app.status_option[4].label") }}
            </el-tag>
            <el-tag
              v-if="scope.row.status === 1 && !scope.row.forceSuspendReason"
              size="small"
              type="success"
            >
              {{ $t("developer_app.status_option[5].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 0" size="small" type="warning">
              {{ $t("developer_app.status_option[6].label") }}
            </el-tag>
            <el-tag
              v-if="scope.row.status === 1 && scope.row.forceSuspendReason"
              size="small"
              type="warning"
            >
              {{ $t("developer_app.status_option[7].label") }} ({{
                formatDate(scope.row.forceSuspendTime, "YYYY-MM-DD HH:mm:ss")
              }})
            </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column min-width="95px" :label="$t('common.operate')">
          <template v-slot="scope">
            <el-button
              type="text"
              @click="showDetailHandle(scope.row.appId, scope.row.appVersionId)"
              >{{ $t('developer.operate_detail') }}</el-button
            >
            <el-button
              v-if="scope.row.status === 1 && isAuth('10400602.MANAGE')"
              type="text"
              @click="showSuspendDialog(scope.row.appId)"
              >{{ $t('developer.operate_suspend') }}</el-button
            >
          </template>
        </el-table-column> -->
        <el-table-column width="75px">
          <template v-slot="scope">
            <el-dropdown class="align-middle" trigger="click">
              <el-button text class="w-8">
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="showDetailHandle(scope.row.appId, scope.row.appVersionId)"
                  >
                    {{ $t("common.detail") }}
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="scope.row.status === 1 && isAuth('10400602.MANAGE')"
                    @click="showSuspendDialog(scope.row.appId)"
                  >
                    {{ $t("developer.operate_suspend") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="$t('developer.operate_suspend')"
      v-model="suspendDialogVisible"
      width="600px"
    >
      <el-form>
        <el-input
          v-model="suspendReason"
          type="textarea"
          :rows="4"
          maxlength="256"
          :placeholder="$t('developer_app.suspend_reason')"
          @blur="() => (suspendReason = suspendReason.trim())"
        />
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button text @click="suspendDialogVisible = false">{{
            $t("common.cancel")
          }}</el-button>
          <el-button type="danger" :loading="suspendAppLoading" @click="suspendApp(1)">{{
            $t("developer.operate_lazy_suspend")
          }}</el-button>
          <el-button type="danger" :loading="suspendAppLoading" @click="suspendApp(0)">{{
            $t("developer.operate_suspend")
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getSysAppList, getAppInfoPage, suspendApp } from "@/api/developer-app";
import { formatDate } from "@/utils/formatDate";
import { timeFilter, dateFilter } from "@/filters/index";
import { formatCountry } from "@/utils/formatCountry";
import { isAuth } from "@/utils";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  name: "Appstore",
  components: { PageTitle },
  data() {
    return {
      dataForm: {
        appName: "",
        developerName: "",
        chargeStrategy: "",
        status: null,
        appCategoryId: null,
      },
      categoryList: [],
      appList: [],
      loading: false,
      dataListLoading: false,
      suspendAppLoading: false,
      noMore: false,
      busy: false,
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      clickCategoryId: null,
      clickAppId: 0,
      suspendDialogVisible: false,
      suspendReason: "",
      appId: "",
    };
  },
  computed: {
    statusArray() {
      return [
        { label: this.$t("developer_app.status_option[0].label"), value: 11 },
        { label: this.$t("developer_app.status_option[1].label"), value: 9 },
        { label: this.$t("developer_app.status_option[2].label"), value: 7 },
        { label: this.$t("developer_app.status_option[3].label"), value: 6 },
        { label: this.$t("developer_app.status_option[4].label"), value: 5 },
        {
          label:
            this.$t("developer_app.status_option[5].label") +
            "/" +
            this.$t("developer_app.status_option[7].label"),
          value: 1,
        },
        { label: this.$t("developer_app.status_option[6].label"), value: 0 },
      ];
    },
    colHeight() {
      return this.$store.state.common.documentClientHeight - 82 - 80;
    },
    categoryTotal() {
      // eslint-disable-next-line no-return-assign
      return this.categoryList !== []
        ? this.categoryList.reduce((total, category) => (total += category.appCount), 0)
        : 0;
    },
  },
  mounted() {
    this.dataForm.status = null;
    this.$store.commit("app/ADD_KEEP_ALIVE_LIST", "Appstore");
    this.getCategoryDataList();
    this.getAppDataList();
  },
  beforeRouteLeave(to, from, next) {
    console.log(to);
    if (to.name !== "developer-app-detail") {
      this.$store.commit("app/REMOVE_KEEP_ALIVE_LIST", "Appstore");
    }
    next();
  },
  methods: {
    timeFilter,
    dateFilter,
    iconView(icon) {
      if (icon) {
        return import.meta.env.VITE_APP_BASE_API + icon;
      }
      // return require('@/assets/img/Android.png')
    },
    getCategoryDataList() {
      getSysAppList()
        .then((data) => {
          this.categoryList = data;
        })
        .catch((err) => {
          this.$confirmError(err);
        });
      for (let i = 0; i < this.categoryList; i++) {
        this.categoryList.categoryIconUrl =
          "/res/apps/category/portrait/" + this.categoryList.categoryIconUrl;
      }
    },
    getAppDataList() {
      this.dataListLoading = true;
      getAppInfoPage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        appCategoryId: this.dataForm.appCategoryId,
        appName: this.dataForm.appName,
        developerName: this.dataForm.developerName,
        chargeStrategy: this.dataForm.chargeStrategy,
        status: this.dataForm.status,
      })
        .then((data) => {
          this.appList = data.data;
          this.rows = data.rows;
          this.dataListLoading = false;
        })
        .catch((err) => {
          this.dataListLoading = false;
          this.$confirmError(err);
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getAppDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getAppDataList();
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt);
    },
    formatCountry(row, column, cellValue, index) {
      return formatCountry(cellValue);
    },
    loadMore() {
      if (this.pageNo > this.rows / this.pageSize) {
        this.loading = false;
        this.busy = true;
        this.noMore = true;
        return;
      }
      this.loading = true;
      this.busy = false;
      this.pageNo = this.pageNo + 1;
      getAppInfoPage({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        appCategoryId: this.clickCategoryId,
      })
        .then((data) => {
          if (this.appList.length >= this.rows) {
            this.loading = false;
            this.busy = true;
            this.noMore = true;
          } else {
            setTimeout(() => {
              this.appList = this.appList.concat(data.data.data);
              this.loading = false;
            }, 1000);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$confirmError(err);
        });
    },
    showDetailHandle(appId, appVersionId) {
      this.$router.push({
        path: "/appstore/list/dev-app-detail",
        query: {
          appId: appId,
          appVersionId: appVersionId,
        },
      });
    },
    showSuspendDialog(appId) {
      this.suspendDialogVisible = true;
      this.appId = appId;
      this.suspendReason = "";
    },
    suspendApp(lazyFlag) {
      if (!this.suspendReason) {
        this.$message.warning(this.$t("developer_app.suspend_reason_null_tip"));
        return;
      }
      if (this.suspendAppLoading) {
        return;
      }
      // this.$confirm(this.$t('developer.confirm_suspend'), '', {
      //   confirmButtonText: this.$t('common.confirm'),
      //   cancelButtonText: this.$t('common.cancel'),
      //   type: 'warning'
      // }).then(() => {
      //   this.suspendAppLoading = true
      //   suspendApp(this.appId, {suspendReason: this.suspendReason, lazySuspendFlag: lazyFlag}).then(res => {
      //     if (res) {
      //       this.suspendDialogVisible = false
      //       this.getAppDataList()
      //     }
      //   }).catch(e => {
      //     console.log(`err:${JSON.stringify(e)}`)
      //   })
      // }).catch((e) => {
      //   console.log(e)
      //   this.suspendAppLoading = false
      // }).finally(() => {
      //   this.suspendAppLoading = false
      // })
      this.suspendAppLoading = true;
      suspendApp(this.appId, {
        suspendReason: this.suspendReason,
        lazySuspendFlag: lazyFlag,
      })
        .then((res) => {
          if (res) {
            this.suspendAppLoading = false;
            this.suspendDialogVisible = false;
            this.getAppDataList();
          }
        })
        .catch((e) => {
          this.suspendAppLoading = false;
          this.$confirmError(e);
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    isAuth,
  },
};
</script>

<style lang="scss" scoped>
.app-store {
  .loadTxt {
    text-align: center;
    width: 100%;
    // z-index: 99;
  }
  .leftPart {
    // border-right: 1px solid $--color-primary-text;
    overflow-y: auto;
    .el-card {
      text-align: center;
      width: 92%;
      margin: 0 0 10px;
      padding: 5px 0;
      box-shadow: none;
      cursor: pointer;
      // &:hover {
      //  transform: scale(1.1);
      //   box-shadow: 0 2px 12px 0 #0000001a;
      //   color: $--color-primary;
      // }
    }
  }
  .rightPart {
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: auto;
    .app-item {
      height: 240px;
      .el-image {
        width: 100px;
        height: 100px;
        border-radius: 5px;
      }
      cursor: pointer;
      text-align: center;
      margin: 2px 0 10px;
      transition: all 0.5s;
      p {
        margin: 0;
        line-height: 1.2rem;
        font-size: small;
      }
      &:hover {
        transform: scale(1.1);
      }
    }
  }
}
.active {
  background-color: #ffffff !important;
  border: 1px solid #409eff;
}
</style>
